<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>爱的告白</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        love: '#FF4B91',
                        loveLight: '#FF85A1',
                        loveDark: '#FF2E63',
                        gold: '#FFD700',
                        ivory: '#FFF8E7'
                    },
                    fontFamily: {
                        romantic: ['Dancing Script', 'cursive', 'system-ui'],
                        main: ['Inter', 'sans-serif']
                    },
                    animation: {
                        'float': 'float 3s ease-in-out infinite',
                        'heartbeat': 'heartbeat 1.5s ease-in-out infinite',
                        'sparkle': 'sparkle 2s linear infinite'
                    },
                    keyframes: {
                        float: {
                            '0%, 100%': { transform: 'translateY(0)' },
                            '50%': { transform: 'translateY(-10px)' }
                        },
                        heartbeat: {
                            '0%, 100%': { transform: 'scale(1)' },
                            '25%': { transform: 'scale(1.2)' },
                            '40%': { transform: 'scale(0.9)' },
                            '60%': { transform: 'scale(1.2)' }
                        },
                        sparkle: {
                            '0%, 100%': { opacity: 1 },
                            '50%': { opacity: 0.5 }
                        }
                    }
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .text-shadow-love {
                text-shadow: 0 0 10px rgba(255, 75, 145, 0.5);
            }
            .bg-blur {
                backdrop-filter: blur(8px);
            }
            .heart-shape {
                position: relative;
                width: 20px;
                height: 18px;
            }
            .heart-shape:before,
            .heart-shape:after {
                content: "";
                position: absolute;
                top: 0;
                width: 10px;
                height: 16px;
                border-radius: 50px 50px 0 0;
                background: #FF4B91;
            }
            .heart-shape:before {
                left: 0;
                transform: rotate(-45deg);
                transform-origin: 100% 100%;
            }
            .heart-shape:after {
                left: 10px;
                transform: rotate(45deg);
                transform-origin: 0 100%;
            }
        }
    </style>
    <link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;700&family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
</head>
<body class="bg-ivory min-h-screen overflow-x-hidden">
<!-- 背景爱心 -->
<div id="heartContainer" class="fixed inset-0 pointer-events-none z-0"></div>

<!-- 主要内容 -->
<main class="relative z-10 min-h-screen flex flex-col items-center justify-center px-4 py-12">
    <!-- 标题区域 -->
    <section id="titleSection" class="max-w-4xl w-full text-center mb-16 opacity-0 transition-opacity duration-1000">
        <h1 class="font-romantic text-[clamp(2.5rem,8vw,5rem)] font-bold text-love text-shadow-love mb-6 animate-heartbeat">
            我爱你
        </h1>
        <p class="font-main text-[clamp(1.2rem,3vw,1.8rem)] text-gray-700 mb-8 leading-relaxed">
            从见到你的第一眼起，我的世界便有了不一样的色彩。
        </p>
        <div class="relative inline-block">
            <div class="absolute -inset-4 bg-gradient-to-r from-love/30 to-loveLight/30 rounded-full blur-xl opacity-70 animate-pulse"></div>
            <button id="startButton" class="relative z-10 bg-love hover:bg-loveDark text-white font-bold py-4 px-12 rounded-full shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-300 text-xl">
                点击开始
            </button>
        </div>
    </section>

    <!-- 情书区域 -->
    <section id="loveLetter" class="max-w-3xl w-full bg-white/80 bg-blur rounded-2xl shadow-2xl p-8 md:p-12 mb-16 opacity-0 transform translate-y-10 transition-all duration-1000 pointer-events-none">
        <div class="flex justify-between items-start mb-8">
            <div class="flex items-center space-x-2">
                <div class="heart-shape animate-heartbeat"></div>
                <span class="font-romantic text-love text-xl">给我最爱的人</span>
            </div>
            <span class="text-gray-500 text-sm">2025年7月9日</span>
        </div>

        <div class="prose prose-lg max-w-none">
            <p class="text-gray-700 mb-6 leading-relaxed">亲爱的：</p>

            <p class="text-gray-700 mb-6 leading-relaxed">
                当我试图用文字来表达我对你的感情时，才发现语言是如此的苍白无力。
                但我还是想尝试着，用这有限的文字，记录下我对你无限的爱。
            </p>

            <p class="text-gray-700 mb-6 leading-relaxed">
                记得第一次见到你，是在那个阳光明媚的春天。你穿着一件白色的连衣裙，
                笑容如同春风般温暖，一下子就闯进了我的心里。那一刻，我知道，
                你就是我一直在等待的那个人。
            </p>

            <p class="text-gray-700 mb-6 leading-relaxed">
                和你在一起的每一天，都是我生命中最美好的时光。你的笑容，
                你的声音，你的一举一动，都让我心动不已。无论是一起看电影、
                散步，还是简单地坐在一起聊天，我都感到无比的幸福。
            </p>

            <p class="text-gray-700 mb-6 leading-relaxed">
                我知道，爱情不仅仅是浪漫和甜蜜，还意味着责任和承诺。我愿意用我的一生，
                去守护你，去爱你，无论顺境还是逆境，无论富裕还是贫穷，无论健康还是疾病，
                我都会在你身边，直到永远。
            </p>

            <p class="text-gray-700 mb-6 leading-relaxed">
                我爱你的善良，爱你的聪明，爱你的坚强，爱你的一切。你是我生命中最美的风景，
                是我永远的依靠。我希望我们能一起走过人生的每一个阶段，一起创造更多美好的回忆。
            </p>

            <p class="text-gray-700 mb-8 leading-relaxed">
                我爱你，不仅仅是今天，而是永远。
            </p>

            <div class="flex justify-end">
                <p class="font-romantic text-love text-2xl">永远爱你的人</p>
            </div>
        </div>
    </section>

    <!-- 问题区域 -->
    <section id="questionSection" class="max-w-xl w-full bg-white/80 bg-blur rounded-2xl shadow-2xl p-8 md:p-12 text-center opacity-0 transform translate-y-10 transition-all duration-1000 pointer-events-none">
        <h2 class="font-romantic text-[clamp(1.8rem,5vw,2.5rem)] font-bold text-love mb-6">
            你愿意做我的女朋友吗？
        </h2>

        <div class="flex flex-col sm:flex-row justify-center gap-6 mt-10">
            <button id="yesButton" class="bg-love hover:bg-loveDark text-white font-bold py-4 px-10 rounded-full shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-300 text-lg min-w-[160px]">
                愿意 <i class="fa fa-heart ml-2 animate-heartbeat"></i>
            </button>

            <button id="noButton" class="bg-gray-200 hover:bg-gray-300 text-gray-700 font-bold py-4 px-10 rounded-full shadow-lg hover:shadow-xl transform transition-all duration-300 text-lg min-w-[160px]">
                不愿意
            </button>
        </div>
    </section>

    <!-- 回答区域 -->
    <section id="answerSection" class="max-w-4xl w-full bg-white/80 bg-blur rounded-2xl shadow-2xl p-8 md:p-12 text-center opacity-0 transform translate-y-10 transition-all duration-1000 pointer-events-none">
        <div id="happyAnswer" class="hidden">
            <h2 class="font-romantic text-[clamp(2rem,6vw,3rem)] font-bold text-love mb-6 animate-heartbeat">
                太好啦！
            </h2>
            <p class="text-gray-700 text-xl mb-8">
                我会用一生的时间去爱你，珍惜你，保护你。
            </p>
            <div class="relative inline-block mb-8">
                <div class="heart-shape w-16 h-14 animate-heartbeat"></div>
            </div>
            <p class="text-gray-700 text-lg mb-6">
                让我们一起创造属于我们的幸福未来！
            </p>
            <button id="shareButton" class="bg-love hover:bg-loveDark text-white font-bold py-3 px-8 rounded-full shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-300 text-lg">
                分享这份喜悦 <i class="fa fa-share-alt ml-2"></i>
            </button>
        </div>

        <div id="sadAnswer" class="hidden">
            <h2 class="font-romantic text-[clamp(2rem,6vw,3rem)] font-bold text-love mb-6">
                再考虑一下好吗？
            </h2>
            <p class="text-gray-700 text-xl mb-8">
                我会努力成为你心中理想的那个人。
            </p>
            <div class="relative inline-block mb-8">
                <div class="text-love text-5xl">
                    <i class="fa fa-heart-o animate-pulse"></i>
                </div>
            </div>
            <p class="text-gray-700 text-lg mb-6">
                给我一个机会，让我证明我对你的爱是真心的。
            </p>
            <button id="tryAgainButton" class="bg-love hover:bg-loveDark text-white font-bold py-3 px-8 rounded-full shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-300 text-lg">
                再问一次
            </button>
        </div>
    </section>
</main>

<!-- 页脚 -->
<footer class="relative z-10 text-center py-4 text-gray-600 text-sm">
    <p>用❤️制作 | 2025</p>
</footer>

<script>
    // 创建背景爱心
    function createHearts() {
        const container = document.getElementById('heartContainer');
        const numberOfHearts = 50;

        for (let i = 0; i < numberOfHearts; i++) {
            const heart = document.createElement('div');
            heart.className = 'heart-shape absolute';
            heart.style.left = Math.random() * 100 + 'vw';
            heart.style.top = Math.random() * 100 + 'vh';
            heart.style.transform = `scale(${Math.random() * 0.8 + 0.5})`;
            heart.style.opacity = Math.random() * 0.6 + 0.2;
            heart.style.animation = `float ${Math.random() * 5 + 5}s linear infinite`;
            heart.style.animationDelay = Math.random() * 5 + 's';
            container.appendChild(heart);
        }
    }

    // 页面加载后初始化
    window.addEventListener('DOMContentLoaded', () => {
        createHearts();

        // 淡入标题区域
        setTimeout(() => {
            document.getElementById('titleSection').classList.remove('opacity-0');
        }, 500);

        // 开始按钮点击事件
        document.getElementById('startButton').addEventListener('click', () => {
            const titleSection = document.getElementById('titleSection');
            const loveLetter = document.getElementById('loveLetter');

            // 淡出标题区域
            titleSection.classList.add('opacity-0');

            // 淡入情书区域
            setTimeout(() => {
                loveLetter.classList.remove('opacity-0', 'translate-y-10');
                loveLetter.classList.add('pointer-events-auto');
            }, 800);
        });

        // 情书阅读完成后显示问题
        document.getElementById('loveLetter').addEventListener('click', () => {
            const loveLetter = document.getElementById('loveLetter');
            const questionSection = document.getElementById('questionSection');

            // 淡出情书区域
            loveLetter.classList.add('opacity-0', 'translate-y-10');
            loveLetter.classList.remove('pointer-events-auto');

            // 淡入问题区域
            setTimeout(() => {
                questionSection.classList.remove('opacity-0', 'translate-y-10');
                questionSection.classList.add('pointer-events-auto');
            }, 800);
        });

        // 处理"愿意"按钮点击
        document.getElementById('yesButton').addEventListener('click', () => {
            const questionSection = document.getElementById('questionSection');
            const answerSection = document.getElementById('answerSection');
            const happyAnswer = document.getElementById('happyAnswer');

            // 淡出问题区域
            questionSection.classList.add('opacity-0', 'translate-y-10');
            questionSection.classList.remove('pointer-events-auto');

            // 淡入回答区域
            setTimeout(() => {
                answerSection.classList.remove('opacity-0', 'translate-y-10');
                answerSection.classList.add('pointer-events-auto');
                happyAnswer.classList.remove('hidden');

                // 创建更多爱心
                createCelebrationHearts();
            }, 800);
        });

        // 处理"不愿意"按钮点击
        document.getElementById('noButton').addEventListener('click', () => {
            // 让按钮"逃跑"
            const noButton = document.getElementById('noButton');
            noButton.style.position = 'absolute';
            noButton.style.left = Math.random() * (window.innerWidth - 200) + 'px';
            noButton.style.top = Math.random() * (window.innerHeight - 100) + 'px';
        });

        // 处理"再问一次"按钮点击
        document.getElementById('tryAgainButton').addEventListener('click', () => {
            const answerSection = document.getElementById('answerSection');
            const sadAnswer = document.getElementById('sadAnswer');
            const questionSection = document.getElementById('questionSection');

            // 淡出回答区域
            answerSection.classList.add('opacity-0', 'translate-y-10');
            answerSection.classList.remove('pointer-events-auto');
            sadAnswer.classList.add('hidden');

            // 淡入问题区域
            setTimeout(() => {
                questionSection.classList.remove('opacity-0', 'translate-y-10');
                questionSection.classList.add('pointer-events-auto');

                // 重置不愿意按钮
                const noButton = document.getElementById('noButton');
                noButton.style.position = '';
                noButton.style.left = '';
                noButton.style.top = '';
            }, 800);
        });

        // 处理"分享"按钮点击
        document.getElementById('shareButton').addEventListener('click', () => {
            alert('感谢分享这份喜悦！❤️');
        });
    });

    // 创建庆祝用的爱心
    function createCelebrationHearts() {
        const container = document.getElementById('heartContainer');
        const numberOfHearts = 100;

        for (let i = 0; i < numberOfHearts; i++) {
            const heart = document.createElement('div');
            heart.className = 'heart-shape absolute';
            heart.style.left = window.innerWidth / 2 + 'px';
            heart.style.top = window.innerHeight / 2 + 'px';
            heart.style.transform = `scale(${Math.random() * 0.8 + 0.5})`;
            heart.style.opacity = Math.random() * 0.8 + 0.2;

            // 随机方向和速度
            const angle = Math.random() * Math.PI * 2;
            const speed = Math.random() * 5 + 2;
            const vx = Math.cos(angle) * speed;
            const vy = Math.sin(angle) * speed;

            container.appendChild(heart);

            // 动画效果
            let x = window.innerWidth / 2;
            let y = window.innerHeight / 2;
            let opacity = 1;

            const animate = () => {
                x += vx;
                y += vy;
                opacity -= 0.01;

                heart.style.left = x + 'px';
                heart.style.top = y + 'px';
                heart.style.opacity = opacity;

                if (opacity > 0) {
                    requestAnimationFrame(animate);
                } else {
                    container.removeChild(heart);
                }
            };

            requestAnimationFrame(animate);
        }
    }
</script>
</body>
</html>
    